<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>图表统计</title>
    <link rel="stylesheet" href="../assets/lib/bootstrap.css" />
    <link rel="stylesheet" href="../assets/lib/main.css" />
    <script src="../assets/lib/jquery.js"></script>
    <script type="text/javascript" src="../assets/lib/echarts.min.js"></script>
  </head>

  <body>
    <div class="container-fluid">
      <div class="row spannel_list">
        <div class="col-sm-3 col-xs-6">
          <div class="spannel">
            <em>10015</em><span>篇</span>
            <b>总文章数</b>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="spannel scolor01">
            <em>123</em><span>篇</span>
            <b>日新增文章数</b>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="spannel scolor02">
            <em>35</em><span>条</span>
            <b>评论总数</b>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="spannel scolor03">
            <em>123</em><span>条</span>
            <b>日新增评论数</b>
          </div>
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row curve-pie">
        <div class="col-lg-8 col-md-8">
          <div class="gragh_pannel" id="curve_show"></div>
        </div>
        <div class="col-lg-4 col-md-4">
          <div class="gragh_pannel" id="pie_show"></div>
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="column_pannel" id="column_show"></div>
    </div>

    <script>
      var oChart = echarts.init(document.getElementById('curve_show'));
      var aList_all = [
        { count: 36, date: '2019-04-13' },
        { count: 52, date: '2019-04-14' },
        { count: 78, date: '2019-04-15' },
        { count: 85, date: '2019-04-16' },
        { count: 65, date: '2019-04-17' },
        { count: 72, date: '2019-04-18' },
        { count: 88, date: '2019-04-19' },
        { count: 64, date: '2019-04-20' },
        { count: 72, date: '2019-04-21' },
        { count: 90, date: '2019-04-22' },
        { count: 96, date: '2019-04-23' },
        { count: 100, date: '2019-04-24' },
        { count: 102, date: '2019-04-25' },
        { count: 110, date: '2019-04-26' },
        { count: 123, date: '2019-04-27' },
        { count: 100, date: '2019-04-28' },
        { count: 132, date: '2019-04-29' },
        { count: 146, date: '2019-04-30' },
        { count: 200, date: '2019-05-01' },
        { count: 180, date: '2019-05-02' },
        { count: 163, date: '2019-05-03' },
        { count: 110, date: '2019-05-04' },
        { count: 80, date: '2019-05-05' },
        { count: 82, date: '2019-05-06' },
        { count: 70, date: '2019-05-07' },
        { count: 65, date: '2019-05-08' },
        { count: 54, date: '2019-05-09' },
        { count: 40, date: '2019-05-10' },
        { count: 45, date: '2019-05-11' },
        { count: 38, date: '2019-05-12' },
      ];

      let aCount = [];
      let aDate = [];

      for (var i = 0; i < aList_all.length; i++) {
        aCount.push(aList_all[i].count);
        aDate.push(aList_all[i].date);
      }

      var chartopt = {
        title: {
          text: '月新增文章数',
          left: 'center',
          top: '10',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['新增文章'],
          top: '40',
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            name: '日',
            type: 'category',
            boundaryGap: false,
            data: aDate,
          },
        ],
        yAxis: [
          {
            name: '月新增文章数',
            type: 'value',
          },
        ],
        series: [
          {
            name: '新增文章',
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: { areaStyle: { type: 'default' }, color: '#f80' },
              lineStyle: { color: '#f80' },
            },
            data: aCount,
          },
        ],
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(255,136,0,0.39)',
              },
              {
                offset: 0.34,
                color: 'rgba(255,180,0,0.25)',
              },
              {
                offset: 1,
                color: 'rgba(255,222,0,0.00)',
              },
            ]),
          },
        },
        grid: {
          show: true,
          x: 50,
          x2: 50,
          y: 80,
          height: 220,
        },
      };

      oChart.setOption(chartopt);

      var oPie = echarts.init(document.getElementById('pie_show'));
      var oPieopt = {
        title: {
          top: 10,
          text: '分类文章数量比',
          x: 'center',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565'],
        legend: {
          x: 'center',
          top: 65,
          data: ['奇趣事', '会生活', '爱旅行', '趣美味'],
        },
        toolbox: {
          show: true,
          x: 'center',
          top: 35,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ['pie', 'funnel'],
              option: {
                funnel: {
                  x: '25%',
                  width: '50%',
                  funnelAlign: 'left',
                  max: 1548,
                },
              },
            },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['45%', '60%'],
            center: ['50%', '65%'],
            data: [
              { value: 300, name: '奇趣事' },
              { value: 100, name: '会生活' },
              { value: 260, name: '爱旅行' },
              { value: 180, name: '趣美味' },
            ],
          },
        ],
      };
      oPie.setOption(oPieopt);

      var oColumn = this.echarts.init(document.getElementById('column_show'));
      var oColumnopt = {
        title: {
          text: '文章访问量',
          left: 'center',
          top: '10',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['奇趣事', '会生活', '爱旅行', '趣美味'],
          top: '40',
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月'],
          },
        ],
        yAxis: [
          {
            name: '访问量',
            type: 'value',
          },
        ],
        series: [
          {
            name: '奇趣事',
            type: 'bar',
            barWidth: 20,
            itemStyle: {
              normal: { areaStyle: { type: 'default' }, color: '#fd956a' },
            },
            data: [800, 708, 920, 1090, 1200],
          },
          {
            name: '会生活',
            type: 'bar',
            barWidth: 20,
            itemStyle: {
              normal: { areaStyle: { type: 'default' }, color: '#2bb6db' },
            },
            data: [400, 468, 520, 690, 800],
          },
          {
            name: '爱旅行',
            type: 'bar',
            barWidth: 20,
            itemStyle: {
              normal: { areaStyle: { type: 'default' }, color: '#13cfd5' },
            },
            data: [500, 668, 520, 790, 900],
          },
          {
            name: '趣美味',
            type: 'bar',
            barWidth: 20,
            itemStyle: {
              normal: { areaStyle: { type: 'default' }, color: '#00ce68' },
            },
            data: [600, 508, 720, 890, 1000],
          },
        ],
        grid: {
          show: true,
          x: 50,
          x2: 30,
          y: 80,
          height: 260,
        },
        dataZoom: [
          //给x轴设置滚动条
          {
            start: 0, //默认为0
            end: 100 - 1000 / 31, //默认为100
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            handleSize: 0, //滑动条的 左右2个滑动条的大小
            height: 8, //组件高度
            left: 45, //左边的距离
            right: 50, //右边的距离
            bottom: 26, //右边的距离
            handleColor: '#ddd', //h滑动图标的颜色
            handleStyle: {
              borderColor: '#cacaca',
              borderWidth: '1',
              shadowBlur: 2,
              background: '#ddd',
              shadowColor: '#ddd',
            },
          },
        ],
      };
      oColumn.setOption(oColumnopt);
    </script>
  </body>
</html>
